import React, { memo } from 'react'
import { shallowEqual, useSelector } from 'react-redux'
import { PlaylistInfoWrapper } from './style'
import { formatImg, formatTime ,formatCount} from '@/utils/format'
import OperationBar from '@/components/operation-bar'
export default memo(function PlaylistInfo() {
  const { playlistDetail } = useSelector(state => ({
    playlistDetail:state.getIn(['playlist','playlistDetail'])
  }), shallowEqual)
  const info = playlistDetail || {}
  return (
    <PlaylistInfoWrapper>
      <div className="left">
        <div className="mask sprite_covor"></div>
        <img src={formatImg(info.coverImgUrl,208)} alt="" />
      </div>
      <div className="right">
        <div className="title">
          <i className='sprite_icon2 playlist_icon'></i>
          <h2 className='name'>{info.name}</h2>
        </div>
        <div className="create_info">
          <img src={formatImg(info.creator?.avatarUrl, 35)} alt="" className='creator_img'/>
          <div className="creator_name">{info.creator?.nickname}</div>
          <img src={info.creator?.avatarDetail?.identityIconUrl} alt="" className='iden_icon'/>
          <div className="create_time">{formatTime(info.createTime, 'yyyy-MM-dd')}创建</div>
        </div>
        <OperationBar favorCount={formatCount(info.subscribedCount)}
                      shareCount={formatCount(info.shareCount)}
                      downloadCount="下载"
                      commentCount={formatCount(info.commentCount)}
        />
        <div className="tag_info">
          标签：
          <div className='tags'>
            {
              info.tags?.map(item => {
                return (
                  <div className='tag' key={item}>
                    {item}
                  </div>
                )
              })
            }
          </div>
        </div>
        <div className="introduce">
          介绍：
          <span className="content">
            {info.description}
          </span>
        </div>
      </div>
    </PlaylistInfoWrapper>
  )
})
